/**
 * Created by zxcq0 on 2017/3/23.
 * 给工厂分配人员
 */

import React, { Component } from 'react'
// import { SettingAlert } from '../../components'
import { fetchData } from "../../../components/AjaxConsumer";
import { Modal, Button, Form, Transfer } from 'antd';

export default class AssignFactoryUser extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            visible: false,
            mockData: [],
            targetKeys: [],
            factoryId: '',
        };
        this.showModal = this.showModal.bind(this)
        this.handleOk = this.handleOk.bind(this)
        this.handleCancel = this.handleCancel.bind(this)
    }

    //显示弹框
    showModal() {
        this.setState({
            visible: true,
        });
    }

    //提供调用初始化方法
    initModal = (factoryId) => {
        console.log("factoryId:" + factoryId);
        this.setState({factoryId: factoryId});
        this.getData(factoryId);
        this.showModal();
    }

    //穿梭框数据初始化
    getData = (factoryId) => {
        // 1.获取所有的用户
        let options = {
            url: '/base/auth/user/all',//请求地址
            type: 'get',//请求方式
            condition: {},//请求条件
            callback: this.setMockData
        };
        fetchData(this, options, (resData) => {
            this.setState({
                resData: resData
            });
            const mockData = [];
            let rtData = resData.data;
            for (let i = 0; i < rtData.length; i++) {
                const data = {
                    key: rtData[i].userId,
                    title: rtData[i].userName,
                    mobile:rtData[i].mobile,
                    loginName:rtData[i].loginName,
                    phone:rtData[i].phone,
                    email:rtData[i].email
                };
                mockData.push(data);
            }
            this.setState({mockData});
        });

        console.log("this.state.factoryId" + factoryId);
        // 2.获取该工厂下所有的人员数据,只需要id
        let options1 = {
            url: '/base/factory/'+factoryId+'/user',//请求地址
            type: 'get',//请求方式
            condition: {},//请求条件
            callback: this.setTargetKeys
        };
        fetchData(this, options1, (resData) => {
            this.setState({
                resData: resData
            });
            const targetKeys = [];
            let rtData = resData.data;
            for (let i = 0; i < rtData.length; i++) {
                targetKeys.push(rtData[i].userId);
            }
            this.setState({targetKeys});
        });
    }


    //设置targetKeys
    setTargetKeys = () => {

    }

    //修改工厂下的用户---
    // todo 修改保存工厂下的用户
    handleOk() {
        this.setState({loading: true});
        var pstData = {};

        var factoryId = this.state.factoryId;

        var factoryUserArr = new Array();
        // 解决工厂下用户清空的情况
        if(this.state.targetKeys.length==0){
            var tmp = {};
            tmp.factoryId = factoryId;
            tmp.userId = '';
            factoryUserArr.push(tmp);
        }else{
            for (var i = 0; i < this.state.targetKeys.length; i++) {
                var tmp = {};
                tmp.factoryId = factoryId;
                tmp.userId = this.state.targetKeys[i];
                factoryUserArr.push(tmp);
            }
        }

        let options = {
            url: '/base/factory/u/user',//请求地址
            type: 'post',//请求方式
            condition: JSON.stringify(factoryUserArr),//请求条件
            contentType: 'application/json; charset=utf-8'
            // callback: this.callback
        };
        fetchData(this, options,this.callback);
    }

    callback = (data) => {
        // alert(data.code);
        this.setState({loading: false, visible: false});
    }

    handleCancel() {
        this.setState({visible: false});
    }

    //点击移动目标时，输出详情
    handleChange = (targetKeys, direction, moveKeys) => {
        console.log(targetKeys, direction, moveKeys);
        this.setState({targetKeys});
    }

    // 渲染每一条记录显示格式
    renderItem = (item) => {
        const customLabel = (
            <span className="custom-item">
                ({item.loginName}){item.title}
            </span>
        );

        return {
            label: customLabel,  // for displayed item
            value: item.title,   // for title and filter matching通过此字段过滤
        };
    }

    render() {
        let formAlerSize = 'large'; //弹出框的大小 只有'large'和'small'两种值 （必须,输错时默认为large）
        return (
            <Modal
                style={{top:'20px'}}
                visible={this.state.visible}
                title="人员分配"
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                width={formAlerSize=='large'?'850px':'400px'}
                footer={[
                    <Button key="back" size="large" onClick={this.handleCancel}>取消</Button>,
                    <Button key="submit" type="primary" size="large" loading={this.state.loading} onClick={this.handleOk}>提交</Button>,
                ]}
            >
                <div style={{float:'left',width:'80px', height:'1px'}}></div>
                {/*手动居中控制*/}
                <Transfer
                    showSearch
                    dataSource={this.state.mockData}
                    listStyle={{
                        width: 300,
                        height: 300
                    }}
                    targetKeys={this.state.targetKeys}
                    onChange={this.handleChange}
                    render={this.renderItem}
                    titles={['未分配权限','已分配权限']}
                />
            </Modal>
        );
    }
}
